<template>
  <div class="lyricsbox">
    <div class="lyleft">
      <div class="imgbox">
        <img :src="this.$store.state.song.picUrl" alt />
      </div>
      <!-- <div class="lybox">{{ val }}</div> -->
    </div>

    <div class="lyright">
      <div class="close" @click="goback">
        <span class="el-icon-close"></span>
      </div>
      <vue-scroll :ops="ops" ref="vs">
        <div class="name">{{ this.$store.state.song.name }}</div>
        <div class="author">
          歌手：
          <span>{{ this.$store.state.song.author }}</span>
        </div>
        <div class="lyricscontent">
          <ul v-if="this.$store.state.song.lyric">
            <li
              v-for="(item, index) in this.$store.state.song.lyric"
              :key="index"
              :class="currentIndex == index ? 'currentLyric' : ''"
            >
              {{ item[1] }}
            </li>
          </ul>
          <span v-else>暂无歌词</span>
        </div>
      </vue-scroll>
    </div>
  </div>
</template>
<script>
export default {
  name: "musiclyrics",
  data() {
    return {
      val: "",
      currentTime: 0,
      currentIndex: 0,
      scrolltop: 0,
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {
          scrollingX: false,
        },
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          background: "#b3c0d1",
          keepShow: true,
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false,
        },
      },
    }
  },
  mounted() {
    var audio = document.getElementById("myaudio")
    audio.addEventListener("timeupdate", () => {
      this.currentTime = audio.currentTime
      if (this.$store.state.song.lyric) {
        let lyricArray = this.$store.state.song.lyric
        let length = lyricArray.length
        if (length) {
          //获取歌词数字
          // //计算滚动条的位置
          if (this.currentIndex == 0) {
            this.scrolltop = 0
          }
          if (this.currentIndex >= 8) {
            this.scrolltop = (this.currentIndex - 6) * 30
          }
          //遍历所有歌词
          //最后一句歌词没有下一句,所以不需要跟下一句的时间做比较
          if (this.currentIndex == length - 2) {
            //判断当前的时间是否大于等于最后一句的时间
            if (this.currentTime >= lyricArray[length - 1][0]) {
              //正在唱最后一句
              this.currentIndex = length - 1
              this.val = lyricArray[length - 1][1]
            }
          } else {
            for (var i = 0; i < length - 1; i++) {
              //将每个歌曲进度都跟数组中的歌词比较,在当前歌词的时间到下一句歌词的时间范围之内
              if (
                this.currentTime >= lyricArray[i][0] &&
                this.currentTime < lyricArray[i + 1][0]
              ) {
                //设置正在播放的行号
                this.currentIndex = i
                this.val = lyricArray[i][1]
              }
            }
          }
        }
      }
    })
  },
  watch: {
    scrolltop: function(newValue, oldValue) {
      this.$refs.vs.scrollTo({
        y: newValue,
      })
    },
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    formDate(date) {
      //格式化时间过滤器
      var m = parseInt(date / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt(date % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
  },
}
</script>
<style lang="scss" scoped>
.lyricsbox {
  width: 100%;
  height: 100%;
  display: flex;
  .lyleft {
    margin: 20px;
    margin-left: 60px;
    .imgbox {
      width: 250px;
      height: 250px;
      overflow: hidden;
      border-radius: 10px;
      img {
        width: 250px;
      }
    }
    .lybox {
      width: 250px;
      margin-top: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: rgb(59, 144, 214);
    }
  }
  .lyright {
    position: relative;
    margin: 20px 0px;
    width: calc(100% - 330px);
    height: calc(100% - 40px);
    .close {
      background: rgb(59, 144, 214);
      position: absolute;
      top: -10px;
      right: 15px;
      width: 30px;
      height: 30px;
      z-index: 10;
      span {
        font-size: 30px;
        color: white;
      }
    }
    .close:hover {
      cursor: pointer;
    }
    .name {
      margin: 20px 40px;
      margin-top: 0px;
      line-height: 40px;
      font-size: 28px;
      font-weight: bold;
    }
    .author {
      margin: 20px 40px;
      height: 20px;
      line-height: 20px;
      span {
        color: rgb(59, 144, 214);
      }
    }
    .lyricscontent {
      margin: 20px 40px;
      height: 300px;
      ul {
        height: 300px;
        li {
          word-break: break-all;
          line-height: 30px;
          list-style: none;
          font-size: 14px;
          color: rgb(161, 159, 159);
        }
        .currentLyric {
          color: #428dd8;
        }
      }
    }
    span {
      font-size: 14px;
      color: rgb(161, 159, 159);
    }
  }
}
</style>
